<template>
  <div class="timebox">
    <div class="timepic" @click="goBack"><img src="@/assets/img/dispath/gotime.png"></div>
    <div class="progress-bar">
      <el-dropdown trigger="click" placement="top" @command="changeYear">
        <div class="year">
          {{currentYear}}
        </div>
        <el-dropdown-menu slot="dropdown" class="timebox-dropdown-menu">
          <el-dropdown-item v-for="item in yearList" :key="item" :command="item" :class="['timebox-dropdown-item', Object.is(currentYear,item) ? 'timebox-dropdown-item-active' : '']">{{item}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="day">
        <div class="handlelist">
          <div
          class="months"
          v-for="(item) in monList"
          :key="item"
          @click="handlemonth(item)"
          :class="{months1: item <= currentMon ? isActive : false}">
            <div class="month-line" :class="['line_a',{'line_last': item === 1}]"></div>
            <div class="month-text">
              <div class="img"><img :src="require(`@/assets/img/dispath/dian${item <= currentMon ? '': '-active'}.png`)"></div>
              <div class="text">{{item}}<span style="font-size:12px;">月</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
export default {
  components: {
  },

  data() {
    return {
      monList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      yearList: ['2022', '2023', '2024'],
      index: 0,
      isActive: false,
      num: 0,
      currentMon: this.$utils.dateFormat(+new Date(), 'm', false), // 当前月份
      currentYear: this.$utils.dateFormat(+new Date(), 'Y', false) // 当前年份
    };
  },
  mounted() {
    this.handlemonth(this.currentMon);
  },

  methods: {
    // TODO:时空演进
    handlemonth(val) {
      this.isActive = true;
      this.currentMon = val;
      this.$store.dispatch('postToEngine', { sceneName: 'TYDD_SKYJ', data: { action: 'SetTime', time: val }});
    },

    // 返回统一调度
    goBack() {
      this.$store.dispatch('postToEngine', { sceneName: 'TYDD_SKYJ', data: { action: 'Stop' }});
      this.$router.push('/dispatch');
    },

    // 改变年份
    changeYear(command) {
      this.currentYear = command;
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('postToEngine', { sceneName: 'TYDD_SKYJ', data: { action: 'Stop' }});
    next();
  }

};
</script>

<style lang = "scss" scoped>
  .timebox{
    width: 112.875rem;
    height: 4.9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    .timepic{
      width: 3.125rem;
      height: 3.125rem;
      margin-right: .375rem;
      background-color: rgba($color: $black, $alpha: 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:.25rem;
      cursor: pointer;
    }
    .progress-bar{
      flex: 1;
      width: 100%;
      height: 4.9375rem;
      background-color: rgba($color: $black, $alpha: 0.4);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 2.5rem;
      border-radius:.25rem;
      .year{
        width: 4.375rem;
        height: 1.625rem;
        color: #00FDFF;
        font-size: 1rem;
        background-color: rgba(0, 253, 255, 0.2);
        text-align: center;
        line-height: 1.625rem;
        margin-right: 1.6875rem;
        cursor: pointer;
      }
      .day{
        flex: 1;
        width: 100%;
        height: 3.125rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .handlelist{
          display: flex;
          .months{
            width:8.4375rem;
            display: flex;
            align-items: center;
            .month-text{
              font-size: .875rem;
              height: 2.4375rem;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              margin-top: .625rem;
              .text{
                font-size:.875rem;
                width:1.875rem;
                color:#00FDFF;
                text-align: center;
              }
              .img{
                background: url(@/assets/img/dispath/yuan-active.png) no-repeat;
                background-size: .8125rem .8125rem;
                width: .8125rem;
                height: .8125rem;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
            .month-line{
              width: 7.125rem;
              border-top: .1875rem solid #00FDFF;
              margin-bottom: 1.125rem;
            }
            .line_last{
              display: none;
            }
          }
          .months1,.months2{
            .month-text{
              .text{
                color:#57FFAA;
              }
              .img{
                background: url(@/assets/img/dispath/yuan.png) no-repeat;
              }
            }
            .month-line{
              border-top: .1875rem solid #57FFAA;
            }
          }
          .months:first-child{
            width: auto;
          }
        }
      }
    }
  }
  .timebox-dropdown-menu{
    padding: 0;
    top: 727px !important;
    left: 150px !important;
    color: #d9d9d9;
    background-color: rgba(0, 0, 0, 0.8);
    border: .0625rem solid rgba(255, 255, 255, 0.1);
    .timebox-dropdown-item:hover{
      color: rgba(46, 214, 230, 1);
      background-color: rgba(46, 214, 230, 0.2);
    }
    .timebox-dropdown-item-active{
      color: rgba(46, 214, 230, 1);
      background-color: rgba(46, 214, 230, 0.2);
    }
    .el-popper .popper__arrow{
      border: 0;
      content: none;
    }
  }
</style>
